<template>
	<div class="match">
		<div v-if="matchUps.length > 0">
			<el-row :gutter="20" type="flex" justify="center">
				<el-col v-for="(matchUp, index) in matchUps" :key="matchUp.id" :span="7">
					<el-card :body-style="{ padding: '1rem'}">
						<MatchUp :match-up-id="matchUp.id"
								 :match-up-title="matchUp.title"
								 :match-up-url="matchUp.url"
								 :blue-side="matchUp.blueSide"
								 :red-side="matchUp.redSide">
						</MatchUp>
					</el-card>
				</el-col>
			</el-row>
		</div>
		<div v-else>
			<div class="match-water-mark">
				NO DATA AVALIABLE!
			</div>
		</div>
	</div>
</template>

<script>
	import MatchUp from '../../components/MatchUp.vue'
	import Http from '../../utils/http.js'
	import Api from '../../utils/api.js'

	export default {
		name: 'match',
		components: {
			MatchUp
		},
		data () {
			return {
				matchUps: []
			};
		},
		props: ['matchId'],
		created: function () {
			this.fetchData(this.matchId);
		},
		methods: {
			fetchData: function (matchId) {
				Http.get(Api.matches, {matchId: matchId}).then(
					(response) => {
						this.matchUps = response.data['match' + matchId] || [];					}
 				)
			}
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component ONLY -->
<style scoped>
	.match-water-mark {
		border: none;
		opacity: 0.25;
		width: 100%;
		text-align: center;
		z-index: 1000;
		font-size: 1rem;
	}
</style>